<template>
    <div>
        <div>
            <el-button type="danger" @click="onReGenerate">重新生成</el-button>
            <el-button @click="onPostRedmine" type="success">发送Redmine</el-button>
        </div>
        <div class="mt-4">
            <el-table :data="tableData">
                <el-table-column prop="title" label="标题"  show-overflow-tooltip />
                <el-table-column prop="workHours" label="工时(Hours)" width="120" align="center"></el-table-column>
                <el-table-column label="操作" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button @click="onEdit(scope.row)" size="small" type="primary">编辑</el-button>
                        <el-button @click="onDelete(scope.row)" size="small" type="danger">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </div>

        <el-dialog append-to-body :visible.sync="visible" title="编辑" width="50%">
            <el-form :model="form">
                <el-form-item label="工时" prop="workHours">
                    <el-input v-model="form.workHours" />
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input type="textarea" :rows="4" v-model="form.title" />
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-button @click="onEditSubmit">确定</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import { defineComponent, reactive, ref } from '@vue/composition-api';
import { getRedmineList, updateRedmine, deleteRedmine, postRedmine } from '@/api/taskRedmine'
import { generateCalendarList } from '@/api/taskRedmineCalendar'
import Decimal from "decimal.js";
import { Message } from 'element-ui';
export default defineComponent({

    props: {
        orgId: Number,
        dateStr: String, 
    },

    setup(props) {
        const tableData = ref([])

        function fetchRedmineList() {
            getRedmineList({
                orgId: props.orgId,
                date: props.dateStr
            }).then(res => {
                const data = res.data
                tableData.value = data.map(item => ({
                    ...item,
                    workHours: (item.workHours / (1000 * 60 * 60)).toFixed(2)
                    // assignNicknameListStr: item.assignNicknameList.join(',')
                }))
            })
        }

        fetchRedmineList()

        function onReGenerate() {
            this.$confirm("是否生成?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    generateCalendarList({
                        orgId: props.orgId,
                        date: props.dateStr
                    }).then(res => {
                        Message.success('OK')
                        fetchRedmineList()
                    })
                });
        }


        const visible = ref(false)
        const form = reactive({
            id: null,
            title: '',
            workHours: ''
        })

        function onEdit(row) {
            form.id = row.id
            form.title = row.title
            form.workHours = row.workHours
            visible.value = true
        }

        function onEditSubmit() {
            const workHours = new Decimal(form.workHours)
            updateRedmine({
                ...form,
                workHours: workHours.mul(new Decimal(60 * 60 * 1000)).toNumber()
            })
                .then(res => {
                    fetchRedmineList()
                }).finally(() => {
                    visible.value = false
                })
        }

        function onDelete(row) {
            deleteRedmine({
                id: row.id
            }).then(res => {
                fetchRedmineList()
            })
        }

        function onPostRedmine() {
            postRedmine({
                orgId: props.orgId,
                date: props.dateStr
            })
        }

        return {
            tableData,
            onReGenerate,

            visible,
            form,
            onDelete,
            onEdit,
            onEditSubmit,
            onPostRedmine
        }
    }  
})

</script>


<style scoped></style>